﻿<style>

.formPanel {margin:10px; padding:10px; background:#eee; line-height:200%;}
.formTitle {font-weight:bold; padding-left:80px;}
.tdLeft { vertical-align:top;width:80px;}

.animation { height:50px; border:1px solid #ddd; background:#efefef; position:relative;}
.block { height:50px; width:50px; background-color:#000; position:absolute; left:0; top:0;}
.console { padding:15px;}
.text { text-align:left;}

.line {margin:10px 0px; border-bottom:1px #aaa dotted;}

</style>

<div style="padding:20px; background:#fff;">


<div class="formPanel"> 
    <h1 style="margin:0px 0px 20px 0px; font-size:20px;">jQuery+easing 动画效果</h1> 
    <div>官网：<a href="http://gsgd.co.uk/sandbox/jquery/easing/">http://gsgd.co.uk/sandbox/jquery/easing/</a></div>
    <div>文档教程：<a href="http://www.js8.in/451.html">http://www.js8.in/451.html</a></div>
    <div><a href="http://willin.me/develop/jquery/jquery-easing-v13/">http://willin.me/develop/jquery/jquery-easing-v13/</a></div>
    <div>演示：<a href="http://jqueryui.com/demos/effect/easing.html">http://jqueryui.com/demos/effect/easing.html</a></div>
    <div>搜索引擎中搜索 jquery easing ，会有很多非常出人意表的应用，以及案例，推荐！</div>
	<div class="animation"> 
		<div class="block" id="block"></div> 
	</div> 
	<div class="console"> 
		<select name="swing" id="easingType"> 
			<option value="" selected="selected">def - 默认方式设置</option> 
			
			<option value="easeInQuad">in - Quadratic - 二次方缓动</option> 
			<option value="easeOutQuad">out - Quadratic - 二次方缓动</option> 
			<option value="easeInOutQuad">inOut - Quadratic - 二次方缓动</option> 
			
			<option value="easeInCubic">in - Cubic - 三次方缓动</option> 
			<option value="easeOutCubic">out - Cubic：三次方缓动</option> 
			<option value="easeInOutCubic">inOut - Cubic：三次方缓动</option> 
			
			<option value="easeInQuart">in - Quartic - 四次方缓动</option> 
			<option value="easeOutQuart">out - Quartic - 四次方缓动</option> 
			<option value="easeInOutQuart">inOut - Quartic - 四次方缓动</option> 
			
			<option value="easeInQuint">in - Quintic - 五次方缓动</option> 
			<option value="easeOutQuint">out - Quintic - 五次方缓动</option> 
			<option value="easeInOutQuint">inOut - Quintic - 五次方缓动</option> 
			
			<option value="easeInSine">in - Sinusoidal - 正弦曲线缓动</option> 
			<option value="easeOutSine">out - Sinusoidal - 正弦曲线缓动</option> 
			<option value="easeInOutSine">inOut - Sinusoidal - 正弦曲线缓动</option> 
			
			<option value="easeInExpo">in - Exponential - 指数曲线缓动</option> 
			<option value="easeOutExpo">out - Exponential - 指数曲线缓动</option> 
			<option value="easeInOutExpo">inOut - Exponential - 指数曲线缓动</option> 
			
			<option value="easeInCirc">in - Circular - 圆形曲线缓动</option> 
			<option value="easeOutCirc">out - Circular - 圆形曲线缓动</option> 
			<option value="easeInOutCirc">inOut - Circular - 圆形曲线缓动</option> 
			
			<option value="easeInElastic">in - Elastic - 指数衰减的正弦曲线缓动</option> 
			<option value="easeOutElastic">out - Elastic - 指数衰减的正弦曲线缓动</option> 
			<option value="easeInOutElastic">inOut - Elastic - 指数衰减的正弦曲线缓动</option> 
			
			<option value="easeInBack">in - Back - 超过范围的三次方缓动</option> 
			<option value="easeOutBack">out - Back - 超过范围的三次方缓动</option> 
			<option value="easeInOutBack">inOut - Back - 超过范围的三次方缓动</option> 
			
			<option value="easeInBounce">in - Bounce - 指数衰减的反弹缓动</option> 
			<option value="easeOutBounce">out - Bounce - 指数衰减的反弹缓动</option> 
			<option value="easeInOutBounce">inOut - Bounce - 指数衰减的反弹缓动</option> 
		</select> 
		<input type="button" id="button_start" value="向右运动" /> 
		<input type="button" id="button_stop" value="向左运动" /> 
	</div> 
	<div class="text"> 
		<p><strong>方法介绍：</strong></p> 
<ul> 
<li>def：默认方式设置</li> 
<li>swing：默认方式加载</li> 
<li>Quad：二次方缓动(t)</li> 
<li>Cubic：三次方缓动</li> 
<li>Quart：四次方缓动</li> 
<li>Quint：五次方缓动</li> 
<li>Sine：正弦曲线缓动</li> 
<li>Expo：指数曲线缓动</li> 
<li>Circ：圆形曲线的缓动</li> 
<li>Elastic：指数衰减的正弦曲线缓动</li> 
<li>Back：超过范围的三次方缓动</li> 
<li>Bounce：指数衰减的反弹缓动</li> 
</ul>	
<p><strong>关于In、Out、Inout的说明：</strong></p> 
<ul> 
<li>ease<strong>In</strong>：加速度缓动；</li> 
<li>ease<strong>Out</strong>：减速度缓动；</li> 
<li>ease<strong>InOut</strong>：先加速度至50%，再减速度完成动画。</li> 
</ul> 
<p>缓动方式的翻译来自：<a href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html" title="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html">JavaScript Tween算法及缓动效果</a></p> 
<p>原创文章，转载请注明出处：<a href="http://www.11gz.com/blog/" title="heluyao的博客">heluyao的博客</a></p> 
	</div> 
	
	
	
<script type="text/javascript"> 
_run(function(){
	$('#button_start').click(function(event){
		var actionType = $("#easingType").val();
		$('#block').animate({left:858},1000,actionType,function(){});
		event.preventDefault();
	});
	$('#button_stop').click(function(event){
		var actionType = $("#easingType").val();
		$('#block').animate({left:0},1000,actionType,function(){});
		event.preventDefault();
	});
});
</script> 


    <div>
    
        <div style="margin:20px 0px 10px 0px; font-size:20px; font-weight:bold;">【在jquery中的用法】</div>

        <div>jquery方法：<span class="strong">slideUp|slideDown|slideToggle|fadeIn|fadeOut|fadeToggle</span></div>
        <pre class="brush: js;">
        $(element).slideUp(duration,easing,[callback]);
        </pre>
        
        
        <div>jquery方法：<span class="strong">fadeTo</span></div>
        <pre class="brush: js;">
        $(element).fadeTo(duration,opacity,easing,[callback]);
        </pre>
        
        <div>jquery方法：<span class="strong">animate</span></div>
        <pre class="brush: js;">
        $(element).animate({properties},duration,easing,callback);
        
        // 或者这样也行
        $(element).animate({left:[100,'swing'],top:[100,'easeOutBounce']});
        
        // 或者
        jQuery(myElement).animate({left:100,top:100},{specialEasing:{left: 'swing',top:'easeOutBounce'}});
        
        </pre>
        

    </div>
    
    <div>
        <div style="margin:20px 0px 10px 0px; font-size:20px; font-weight:bold;">【demo】</div>
        
        <div class="link" id="lnkEffect">请点击我</div>
        
        <div style="height:200px;">
        
        <div id="eleTest" style="width:180px; height:180px; background:#222;"></div>
        
        </div>
        
        <script>
        _run( function() {
        
            $('#lnkEffect').click( function() {
                $('#eleTest').slideToggle( 1800, 'easeInOutSine', function(){} );
            });
            
            
        
        });
        
        </script>
    
    </div>

</div> 

</div>


